<template>
  <div>
    <!--  根据条件查询-->
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="选择一级种类名称:">
          <el-select v-model="pid,value" placeholder="选择一级种类" @change="changeLevel2(value)">
            <el-option value='' label="请选择"></el-option>
            <el-option @click.native="getPid(item.pid)"
                       v-for="item in fileKind"
                       :key="item.id"
                       :label="item.kindName"
                       :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="选择二级种类名称:" v-if="fileKind2!=null&&fileKind2!=''">
          <el-select v-model="value2" placeholder="选择二级种类" @change="changeLevel3(value2)">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in fileKind2"
                :key="item.id"
                :label="item.kindName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择三级种类名称:" v-if="fileKind3!=null&&fileKind3!=''">
          <el-select v-model="value3" placeholder="选择三级种类">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in fileKind3"
                :key="item.id"
                :label="item.kindName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称:">
          <el-input v-model="name" placeholder="产品名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="init">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--编号,名称,档次级别,1级分类,二级分类,三级分类,用途类型,产品经理  -->
    <div>
      <el-table
          :data="fileData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="productId"
            label="产品编号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="productName"
            label="产品名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="firstKindName"
            label="一级分类名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="secondKindName"
            label="二级分类名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="thirdKindName"
            label="三级分类名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="type"
            label="用途类型"
            width="120">
          <template slot-scope="scope">
            <p v-if="fileData[scope.$index].type=='Y001-1'">商品</p>
            <p v-else-if="fileData[scope.$index].type=='Y001-2'">物料</p>
            <p v-else>无法识别</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="responsiblePerson"
            label="产品经理"
            width="120">
        </el-table-column>
        <el-table-column
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="medium">制定设计单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页    -->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          :current-page="Number(pageNum)"
          :page-sizes="[2, 4, 8, 16]"
          :page-size="Number(pageSize)"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)">
      </el-pagination>
    </div>
    <div>
      <!-- 制定设计单弹出框 -->
      <el-dialog title="制定生产工序设计单" :visible.sync="dialogVisible" :before-close="handleDialogClose">
        <el-form :model="form" label-width="80px">
          <el-form-item>
            <!--          添加再次打开一个表格-->
            <el-button type="primary" icon="el-icon-edit" @click="addProcess"><label>添加工序</label></el-button>
            <br>

            <el-button type="danger" icon="el-icon-delete" @click="removeProcess"><label>删除工序</label></el-button>
          </el-form-item>

          <el-form-item label="产品名称:">
            <label v-model="form.productName">
              <b v-text="form.productName"></b>
            </label>
            <label style="position: relative;left: 300px;">产品编号:
              <b>
                <label v-model="form.productId"><b v-text="form.productId"></b></label>
              </b>
            </label>

          </el-form-item>
          <div>
            <el-table
                :data="productionData"
                style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  label="工序名称:"
                  width="180"
                  prop="procedureName">
              </el-table-column>
              <el-table-column
                  label="工序编号"
                  width="180"
                  prop="procedureId">
              </el-table-column>
              <el-table-column
                  label="描述"
                  width="180"
                  prop="procedureDescribe">
              </el-table-column>
              <el-table-column
                  label="工时数"
                  width="180">
                <template slot-scope="scope">
                  <el-input v-model="productionData[scope.$index].labourHourAmount"/>
                </template>
              </el-table-column>
              <el-table-column
                  label="工时单位"
                  width="180">
                <template slot-scope="scope">
                  <el-input v-model="productionData[scope.$index].amountUnit"/>
                </template>
              </el-table-column>
              <el-table-column
                  label="单位工时成本"
                  width="180">
                <template slot-scope="scope">
                  <el-input v-model="productionData[scope.$index].costPrice"/>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-form-item label="此产品登记人:" label-width="100px">
            <label v-model="form.register"><b>{{ form.register }}</b></label>

            <label style="position: relative;left:300px">登记时间:
              <b>
                <label v-text="currentTime"></label>
              </b>
            </label>

          </el-form-item>
          <el-form-item label="设计要求:">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="form.procedureDescribe">
            </el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false,productionData=[],multipleSelection=[]">取消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <!--  添加工序弹出框-->
      <el-dialog title="添加工序" :visible.sync="dialogVisible2" :before-close="handleDialogClose2">
        <!--    查询-->

        <!--  表格  -->
        <el-table
            :data="productionProcessData"
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="procedureId"
              label="工编号"
              width="150">
          </el-table-column>
          <el-table-column
              prop="procedureName"
              label="工序名称"
              width="120">
          </el-table-column>
          <el-table-column
              prop="procedureDescribe"
              label="工序描述"
              width="120">
          </el-table-column>
          <el-table-column
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick2(scope.row)" type="text" size="medium">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--    分页-->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import request from "../../../request.js"

export default {
  name: "FileProduction",
  data() {
    return {
      labourHourAmount: '',
      amountUnit: '',
      costPrice: '',
      productionProcessData: [
        {
          procedureId: '01',
          procedureName: '组装',
          procedureDescribe: '无'
        },
        {
          procedureId: '02',
          procedureName: '测试',
          procedureDescribe: '无'
        },
        {
          procedureId: '03',
          procedureName: '包装',
          procedureDescribe: '无'
        }
      ],
      productionData: [],
      multipleSelection: [],
      form: {},
      dialogVisible: false,
      dialogVisible2: false,
      formInline: {
        user: '',
        region: ''
      },
      pid: '',
      pid22: '',
      value: '',
      value11: '',
      value2: '',
      value22: '',
      value3: '',
      value33: '',
      fileKind: [],
      fileKind11: [],
      fileKind2: [],
      fileKind22: [],
      fileKind3: [],
      fileKind33: [],
      currentTime: '',
      //查询数据
      pageNum: '',
      pageSize: '',
      name: '',
      total: '',
      //初始化展示数据
      fileData: [],
      fileDataDetail: {},

    }
  }, methods: {
    // rowClassName({row, rowIndex}) {
    //   row.xh = rowIndex +1;
    //   },
    handleDialogClose() {
      this.productionData = [];
      this.multipleSelection = [];
      //   this.productionProcessData=[];
      this.form = {};
      this.dialogVisible = false;
    },
    handleDialogClose2() {
      this.dialogVisible2 = false;
    }, handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val;
    },

    add() {
      let data = this.productionData;
      let map = {
        'procedure': this.form,
        'details': this.productionData
      }
      axios.post("http://localhost:8150/design-procedure/addProcedure", map).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        if (data.data.flag) {
          this.dialogVisible = false;
          this.form = {};
          this.productionData = [];
        }
        this.$message({
          showClose: true,
          message: data.data.message,
          type: data.data.flag == true ? 'success' : 'error'
        });
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    //查询工序数据
    queryProcessData() {
      /*     axios.get("http://localhost:8150/design-procedure/queryProcedure",{
             params:{
               'checkTag':'S001-1',
               'firstId':'',
               'secondId':'',
               'threeId':'',
               'pageNum':'',
               'pageSize':''
             }
           }).then(data =>{
             this.productionProcessData=data.data.data.records;
           }).catch(e =>{
             alert("错误信息为:"+e)
           });*/
    },
    removeProcess() {
      let multipleSelection = this.multipleSelection;
      let productionData = this.productionData;
      for (let j = 0; j < multipleSelection.length; j++) {
        for (let i = 0; i < productionData.length; i++) {
          if (productionData[i].procedureId == multipleSelection[j].procedureId) {
            productionData.splice(i, 1);
          }
        }
      }
    },
    //添加工序设计
    addProcess() {
      //   this.queryProcessData();
      this.dialogVisible2 = true;
    },
    handleClick(row) {
      this.form.register = row.register;
      this.currentTime = row.createTime;
      this.form.productName = row.productName;
      this.form.productId = row.productId;
      this.form.firstKindId = row.firstKindId;
      this.form.firstKindName = row.firstKindName;
      this.form.secondKindId = row.secondKindId;
      this.form.secondKindName = row.secondKindName;
      this.form.thirdKindId = row.thirdKindId;
      this.form.thirdKindName = row.thirdKindName;
      this.form.designer = row.designer;
      this.dialogVisible = true;
    },
    //初始化数据
    init() {
      axios.get("http://localhost:8150/file/queryProduct", {
        params: {
          'name': this.name,
          'firstId': this.value,
          'secondId': this.value2,
          'threeId': this.value3,
          'pageNum': this.pageNum,
          'pageSize': this.pageSize,
          'designProcedureTag': 'G001-0',
          'type': 'Y001-1'
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.fileData = data.data.data.records;
        this.pageNum = data.data.data.current;
        this.pageSize = data.data.data.size;
        this.total = data.data.data.total;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      //  console.log(`每页 ${val} 条`);
      this.init();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      //console.log(`当前页: ${val}`);
      this.init();
    },
    changeLevel2(id) {
      // console.log("value:" + id)
      let a = 0;
      for (let i = 0; i < this.fileKind.length; i++) {
        for (let j = 0; j < this.fileKind[i].list.length; j++) {
          if (id === this.fileKind[i].list[j].pid) {
            this.fileKind2[a] = this.fileKind[i].list[j];
            a++;
          } else {
            this.fileKind2 = [];
            this.fileKind3 = [];
            this.value2 = '';
            this.value3 = '';
          }
        }

      }
    }, /*changeLevel22(id) {
      this.form.firstKindId=id;
      for (let i=0;i<this.fileKind11.length;i++){
        if (id==this.fileKind11[i].id){
          this.form.firstKindName=this.fileKind11[i].kindName;
        }else {
          this.form.firstKindName='';
          this.form.firstKindId='';
          this.value11='';
        }
      }
      let a = 0;
      for (let i = 0; i < this.fileKind11.length; i++) {
        for (let j = 0; j < this.fileKind11[i].list.length; j++) {
          if (id === this.fileKind11[i].list[j].pid) {
            this.fileKind22[a] = this.fileKind11[i].list[j];
            a++;
          } else {
            this.fileKind22 = [];
            this.fileKind33 = [];
            this.value22 = '';
            this.value33 = '';
          }
        }
      }
    }, changeLevel33(id) {
      for (let i=0;i<this.fileKind22.length;i++){
        if (id==this.fileKind22[i].id){
          this.form.secondKindName=this.fileKind22[i].kindName;
        }else {
          this.form.secondKindName='';
          this.form.secondKindId='';
          this.value33='';
        }
      }
      //  console.log(id)
      let a = 0;

      for (let i = 0; i < this.fileKind22.length; i++) {
        for (let j = 0; j < this.fileKind22[i].list.length; j++) {
          if (id == this.fileKind22[i].list[j].pid) {
            this.fileKind33[a] = this.fileKind22[i].list[j];
            a++;
          } else {
            this.fileKind33= [];
            this.value33 = '';
          }
        }
      }
    },
    changeLevel4(id){
      this.form.thirdKindId=id;
      for (let i=0;i<this.fileKind33.length;i++){
        if (id==this.fileKind33[i].id){
          this.form.thirdKindName=this.fileKind33[i].kindName;
        }else {
          this.form.thirdKindId='';
        }
      }
    }, getPid22(id) {
      this.pid22 = id;
    },*/ changeLevel3(id) {
      //  console.log(id)
      let a = 0;
      for (let i = 0; i < this.fileKind2.length; i++) {
        for (let j = 0; j < this.fileKind2[i].list.length; j++) {
          if (id == this.fileKind2[i].list[j].pid) {
            // console.log(this.fileKind2[i].list[j].pid)
            this.fileKind3[a] = this.fileKind2[i].list[j];
            a++;
          } else {
            this.fileKind3 = [];
            this.value3 = '';
          }
        }
      }
    }, getPid(id) {
      this.pid = id;
    },//获取下拉框的值
    getSelectValue() {
      axios.get("http://localhost:8150/config-file-kind/displayType").then(data => {
        this.fileKind = data.data.data;
        this.fileKind11 = data.data.data;
      }).catch(e => {
        alert("错误信息为:" + e)
      });
    }, handleClose() {
      this.fileDataDetail = {};
      this.dialogVisible = false;
    },
    handleClick2(row) {
      let data = {
        procedureId: '',
        procedureName: '',
        procedureDescribe: ''
      }
      data.procedureId = row.procedureId;
      data.procedureName = row.procedureName;
      data.procedureDescribe = row.procedureDescribe;
      data.labourHourAmount = '';
      data.amountUnit = '';
      data.costPrice = '';
      this.productionData.push(data);
      this.dialogVisible2 = false;
    }
  }, created() {
    this.getSelectValue();
    this.init();
  }
}
</script>

<style scoped>

</style>